<template>
  <div class="home">
    <ul class="left">
      <li v-for="(item,index) in classId" :key="index" :class="{active: item.id == check.id}" @click="checkLi(item)">{{item.name}}</li>
    </ul>
    <ul class="right">
      <li v-for="(item,index) in  viewList" :key="index" @click="jump(item)">
        <img :src="item.list_pic_url" alt="" />
        <p>{{item.name}}</p>
        <p class="price">
          原价7890，活动折扣后的价格为
          <i style="color: red">{{item.retail_price}}</i>
        </p>
      </li>
    </ul>
  </div>
</template>

<script>
// import axios from 'axios';
export default {
  name: "Home",
  data() {
    return {
      check: {}, // 选中分类的数据
      classId:[], // 存放分类的信息
      viewList: [], // 存放选中的分类的商品数据
    }
  },
 watch:{
   check:{
     handler(){
       this.viewList = this.check.goodsList;
     },
     deep:true // 开启深度监听
   }
 },
  created() {
   this.$axios.get('http://shop.bufantec.com/bufan/index/index').then(res => {
     this.classId = res.data.newCategoryList;
     this.check = this.classId[0];
   })
    
  },
  methods: {
    checkLi(val){
      // console.log();
      this.check = val;
    },
    jump(val){
      this.$router.push(`/detail/${val.id}`)
    }
   
  },
};
</script>
<style lang="scss" scoped>
.home {
  display: flex;
  height: 100%;
  .left {
    width: 100px;
    height: 100%;
    border: 1px solid #ccc;
  }
  .right {
    flex: 1;
    height: 100%;
    overflow: auto;
    // width: calc(100% - 100px);
    // calc
  }
  li {
    line-height: 40px;
    text-align: center;
    border-bottom: 1px solid #ccc;
    list-style: none;
  }
  img{
    width:100%;
  }
  .price {
    font-size: 12px;
  }
  .active {
    background: skyblue;
  }
}
</style>